<!-- 批量合同 -->
<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        流程:创建 - 劳动合同管理 - 合同签订（批量） - 创建
      </div>
      <div class="top-operate">
        <el-button type="primary">提交</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </div>
    <div class="eda-main">
      <div class="main-middle">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                 size="default" @submit.prevent>
          <div class="table-container">
            <table class="table-layout">
              <tbody>
              <tr>
                <td class="table-cell" colspan="4">
                  <div class="static-content-item">
                    <div>| 合同信息</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>合同名称</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="htname">
                    <el-input v-model="formData.htname" type="text" clearable></el-input>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>合同编号</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" prop="htbh">
                    <el-input v-model="formData.htbh" type="text" clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>合同开始日期</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="ksrq">
                    <el-date-picker v-model="formData.ksrq" type="date" class="full-width-input"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>合同结束日期</div>
                  </div>
                </td>
                <td class="table-cell">
                  <el-form-item label="" label-width="0" prop="jsrq">
                    <el-date-picker v-model="formData.jsrq" type="date" class="full-width-input"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <div class="static-content-item">
                    <div>合同模板</div>
                  </div>
                </td>
                <td class="table-cell" colspan="3">
                  <el-form-item label="" label-width="0" prop="htmb">
                    <el-select v-model="formData.htmb" class="full-width-input" clearable>
                      <el-option v-for="(item, index) in htmbOptions" :key="index" :label="item.value"
                                 :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell" colspan="4">
                  <div class="static-content-item">
                    <div>| 人员明细</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="table-cell" colspan="4">
                  <div class="table-container">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>
                    <el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails">删除</el-button>
                    <el-table
                        v-loading="loading"
                        :data="bcglXiangXiList"
                        :row-class-name="rowClassName"
                        @selection-change="handleDetailSelectionChange"
                        ref="tb"
                    >
                      <el-table-column type="selection" width="97px" align="center" />
                      <el-table-column label="序号" align="center" prop="xh" width="97px">

                      </el-table-column>

                      <el-table-column label="员工姓名" width="132px" prop="sjfw">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>

                      <el-table-column label="所在部门" align="center" prop="ts" width="132px">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>
                      <el-table-column label="岗位" align="center" prop="dkdd" width="132px">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>

                      <el-table-column label="工资" width="132px" prop="jxsjfw">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>

                      <el-table-column label="联系方式" width="132px" prop="jxsjfw">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>

                      <el-table-column label="身份证号" width="132px" prop="jxsjfw">
                        <el-input v-model="ipa" class="w-50 m-2" placeholder="Please Input" :suffix-icon="Search"/>
                      </el-table-column>
                    </el-table>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      ipa:'',
      formData: {
        htname: "",
        htbh: "",
        ksrq: null,
        jsrq: null,
        htmb: "",
      },
      rules: {},
      htmbOptions: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      //详细list
      bcglXiangXiList: [],
      //选中的从表数据
      checkedDetail: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    rowClassName({ row, rowIndex }) {
      row.xh = rowIndex + 1;
    },
    //单选框选中数据
    handleDetailSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(selection.pop());
      } else {
        this.checkedDetail = selection;
      }
    },
    handleAddDetails() {
      if (this.bcglXiangXiList === undefined) {
        this.bcglXiangXiList = new Array();
      }
      let obj = {};
      obj.ts = "1";
      // obj.dkdd = "1";
      // obj.sjfw = ["07:00","07:30"];
      // obj.jxsjfw = ["06:00","12:00"];

      this.bcglXiangXiList.push(obj);
    },
    handleDeleteDetails() {
      if (this.checkedDetail.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
      }
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}

</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
.deabutton{
  padding-top: 2px;
  text-align: right;
  min-width: 74px;
}
.deabutton i{
  font-size: 20px;
  margin: 0 6px;
  cursor: pointer;
}
</style>